<div class="py-4 pb-7 pb-lg-9 py-lg-9 container">
  <div class="row d-flex flex-lg-row-reverse">
    {%- comment -%}注意外层父元素position值，会影响锚点位置{%- endcomment -%}
    <div id="orders" class="position-absolute top-0"></div>
    <div class="account-orders col-12 col-lg-9">
      <nav class="d-block d-lg-none breadcrumb mb-4 " aria-label="breadcrumb">
        <a
          class="d-flex text-decoration-none breadcrumb-item icon-wrap-md active text-black"
          aria-current="page"
          href="{{ routes.account_url }}">
          {% render 'icon-chevron-left' %}
          {{ 'customer.account.back_to_account' | t }}
        </a>
      </nav>
      <div class="bg-gray-100 border-0 p-4 card rounded-3 mb-3 mb-lg-4 account-title {% if customer.orders.size <= 0 %}d-none d-lg-block{% endif %}">
        <h2 class="lead fw-bold mb-0">{{ 'customer.my_orders.title' | t }}</h2>
      </div>
      {% paginate customer.orders by 9 %}
        {%- if customer.orders.size > 0 -%}
          <div class="mb-n4">
            {%- for order in customer.orders -%}
              <div class="card rounded-3 p-4 mb-4 bg-gray-100 border-0">
                <a href="{{ order.customer_url }}" class="stretched-link"></a>
                <div class="row">
                  <div class="col-12 col-lg-5">
                    <p class="mb-0 mb-lg-1">
                      <span class="gray-600">{{ 'customer.my_orders.payment_status' | t }}:
                      </span>
                      <span class="text-black">{{ order.financial_status_label }}</span>
                    </p>
                  </div>
                  <div class="col-12 col-lg-7">
                    <p class="mb-0 mb-lg-1">
                      <span class="gray-600">{{ 'customer.my_orders.fulfillment_status' | t }}:
                      </span>
                      <span class="text-black">{{ order.fulfillment_status_label }}</span>
                    </p>
                  </div>
                  <div class="col-12 col-lg-5">
                    <p class="mb-0 mb-lg-1">
                      <span class="gray-600">{{ 'customer.my_orders.order_number' | t }}:
                      </span>
                      <span class="text-black">{{ order.name }}</span>
                    </p>
                  </div>
                  <div class="col-12 col-lg-7">
                    <p class="mb-0 mb-lg-1">
                      <span class="gray-600">{{ 'customer.my_orders.date' | t }}:
                      </span>
                      <span class="text-black">{{ order.created_at | time_tag: format: "date_at_time" }}</span>
                    </p>
                  </div>
                  {%- if order.cancelled -%}
                    <div class="col-12">
                      <p class="mb-0 mb-lg-1">
                        <span class="gray-600">{{ 'customer.my_orders.cancelled_on' | t }}:
                        </span>
                        <span class="text-black">{{ order.cancelled_at | time_tag: format: "date_at_time" }}</span>
                      </p>
                    </div>
                    <div class="col-12">
                      <p class="mb-0 mb-lg-1">
                        <span class="gray-600">{{ 'customer.my_orders.cancelled_reason' | t }}:
                        </span>
                        <span class="text-black">{{ order.cancel_reason_label }}</span>
                      </p>
                    </div>
                  {%- endif -%}
                  {% assign line_item = order.line_items | first %}
                  {% if line_item.fulfillment.tracking_url %}
                    <div class="col-12 col-lg-5">
                      <a
                        href="{{ line_item.fulfillment.tracking_url }}"
                        target="_blank"
                        rel="noopener nofollow"
                        class="mb-1 link-primary text-decoration-none">{{ 'customer.my_orders.track_shipment' | t }}{% render 'icon-open-link' %}</a>
                    </div>
                  {% endif %}
                  {% if line_item.fulfillment.tracking_number %}
                    <div class="col-12 col-lg-7">
                      <p class="mb-1">
                        <span class="gray-600">{{ 'customer.my_orders.tracking_number' | t }}:
                        </span>
                        <span>{{ line_item.fulfillment.tracking_number }}</span>
                      </p>
                    </div>
                  {% endif %}
                </div>
                <hr class="my-4">
                <ul class="list-unstyled mb-0 ">
                  {% for line_item in order.line_items %}
                    <li class="row">
                      <div class="col-auto">
                        <div class="ratio ratio-1x1 item-img">
                          <img
                            width="80"
                            height="80"
                            loading="lazy"
                            src="{{ line_item.image | img_url: '80x' }}"
                            srcset="{{ line_item.image | img_url: '80x' }} 1x, {{ line_item.image | img_url: '160x' }} 2x, {{ line_item.image | img_url: '240x' }} 3x"
                            alt="{{ line_item.image.alt | escape }}"
                            class="img-fluid w-100 h-100">
                        </div>
                      </div>

                      <div class="col">
                        <div class="d-flex justify-content-between">
                          <p class="mb-0 mw-text-3 text-black me-1" href="{{ line_item.url }}">
                            <span class="fw-bold break-word lead">{{ line_item.title | escape }}</span>
                            {% unless line_item.title contains 'Default' %}<br><span class="">{{ line_item.title | escape }}</span>
                            {% endunless %}
                          </p>
                          <div class="d-block d-md-none text-black fw-bold lead">
                            {%- if line_item.original_line_price != line_item.final_line_price -%}
                              <div class="d-inline-block">
                                <dt>
                                  <span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
                                </dt>
                                <dd>
                                  <s class="gray-600">{{ line_item.original_line_price | money }}</s>
                                </dd>
                              </div>
                              <div class="d-inline-block">
                                <dt>
                                  <span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
                                </dt>
                                <dd>
                                  <span>{{ line_item.final_line_price | money }}</span>
                                </dd>
                              </div>
                            {%- else -%}
                              {{ line_item.original_line_price | money }}
                            {%- endif -%}
                          </div>
                        </div>
                        <div class="text-black d-flex justify-content-between">
                          {%- if line_item.original_price != line_item.final_price or line_item.unit_price_measurement -%}
                            {%- if line_item.original_price != line_item.final_price -%}
                              <div class="d-inline-block">
                                <dt>
                                  <span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
                                </dt>
                                <dd>
                                  <s class="gray-600">{{ line_item.original_price | money }}</s>
                                </dd>
                              </div>
                              <div class="d-inline-block">
                                <dt>
                                  <span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
                                </dt>
                                <dd>
                                  <span>{{ line_item.final_price | money }}</span>
                                </dd>
                              </div>
                            {%- else -%}
                              <div class="d-inline-block">
                                <dt>
                                  <span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
                                </dt>
                                <dd>
                                  {{ line_item.original_price | money }}
                                </dd>
                              </div>
                            {%- endif -%}
                            {%- if line_item.unit_price_measurement -%}
                              <div class="d-inline-block">
                                <dt>
                                  <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                                </dt>
                                <dd>
                                  <span>
                                    {%- capture unit_price_separator -%}
                                      <span aria-hidden="true">/</span>
                                      <span class="visually-hidden">{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
                                    {%- endcapture -%}
                                    {%- capture unit_price_base_unit -%}
                                      {%- if line_item.unit_price_measurement.reference_value != 1 -%}
                                        {{- line_item.unit_price_measurement.reference_value -}}
                                      {%- endif -%}
                                      {{ line_item.unit_price_measurement.reference_unit }}
                                    {%- endcapture -%}
                                    <span data-unit-price>{{ line_item.unit_price | money }}</span>
                                    {{- unit_price_separator -}}{{- unit_price_base_unit -}}
                                  </span>
                                </dd>
                              </div>
                            {%- endif -%}
                            <span class="d-inline-block d-lg-none ms-2">&times; {{ line_item.quantity }}</span>
                          {%- else -%}
                            <span>{{ line_item.final_price | money }}</span>
                            <span class="d-inline-block d-lg-none ms-2">&times; {{ line_item.quantity }}</span>
                          {%- endif -%}
                        </div>
                      </div>
                      <div class="col-lg-6 d-none d-lg-block text-black">
                        <div class="d-flex align-items-center justify-content-between">
                          <div>
                            <p class="mb-0 ">&times; {{ line_item.quantity }}</p>
                          </div>
                          <div class="fw-bold">
                            {%- if line_item.original_line_price != line_item.final_line_price -%}
                              <div class="d-inline-block">
                                <dt>
                                  <span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
                                </dt>
                                <dd>
                                  <s class="gray-600">{{ line_item.original_line_price | money }}</s>
                                </dd>
                              </div>
                              <div class="d-inline-block">
                                <dt>
                                  <span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
                                </dt>
                                <dd>
                                  <span>{{ line_item.final_line_price | money }}</span>
                                </dd>
                              </div>
                            {%- else -%}
                              {{ line_item.original_line_price | money }}
                            {%- endif -%}
                          </div>
                        </div>
                      </div>
                    </li>
                    <hr class="my-4">
                  {% endfor %}
                </ul>
                <div class="row">
                  <div class="small col-12 col-lg-6 ms-auto me-0">
                    <div class="d-flex gray-700 justify-content-between mb-1">
                      <div class="">{{ 'customer.my_orders.subtotal' | t }}:&nbsp;</div>
                      <div>{{ order.line_items_subtotal_price | money }}</div>
                    </div>
                    {%- if order.cart_level_discount_applications != blank -%}
                      {%- for discount_application in order.cart_level_discount_applications -%}
                        <div class="d-flex gray-700 justify-content-between mb-1">
                          <div class="">{{ 'customer.my_orders.discount' | t }}&nbsp;({{- discount_application.title -}}):&nbsp;</div>
                          <div>-{{ discount_application.total_allocated_amount | money }}</div>
                        </div>
                      {%- endfor -%}
                    {%- endif -%}
                    {%- for shipping_method in order.shipping_methods -%}
                      <div class="d-flex gray-700 justify-content-between mb-1">
                        <div class="">{{ 'customer.my_orders.shipping' | t }} ({{ shipping_method.title }}):&nbsp;</div>
                        <div>{{ shipping_method.price | money }}</div>
                      </div>
                    {%- endfor -%}
                    {%- for tax_line in order.tax_lines -%}
                      <div class="d-flex gray-700 justify-content-between mb-1">
                        <div class="">{{ 'customer.my_orders.tax' | t }} ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%):&nbsp;</div>
                        <div>{{ tax_line.price | money }}</div>
                      </div>
                    {%- endfor -%}
                    <div class="d-flex justify-content-between fs-6 text-black">
                      <div class="fw-bold">{{ 'customer.my_orders.total' | t }}:&nbsp;</div>
                      <div class="fw-bold">{{ order.total_price | money_with_currency }}</div>
                    </div>
                    {% if order.financial_status == 'refunded' or order.financial_status == 'partially_refunded' %}
                      <div class="d-flex gray-700 justify-content-between mt-2">
                        <div class="">{{ 'customer.my_orders.refund_amount' | t }}:&nbsp;</div>
                        <div>{{ order.total_refunded_amount | money }}</div>
                      </div>
                    {% endif %}
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        {%- else -%}
          <div class="card rounded-3 responsive-border bg-gray-100 border-0">
            <div class="h-3 h-lg-4 d-flex flex-center">
              <div class="text-center">
                <div class="d-inline-block icon-wrap-xl mb-2">
                  {% render 'icon-cart' %}
                </div>
                <p class="text-black">{{ 'customer.my_orders.none' | t }}</p>
              </div>
            </div>
          </div>
        {%- endif -%}
        {% render 'pagination' %}
      {% endpaginate %}
    </div>
    <div id="sidebar" class="col-12 col-lg-3">
      {% render 'account-sidebar' %}
    </div>
  </div>
</div>